<@override name="styles">
<link href="assets/DataTables-1.9.4/media/css/dataTables.bootstrap.css" type="text/css" rel="stylesheet">
</@override>
<@override name="content">
    <div class="header">
      <h1 class="page-title">比赛列表</h1>
    </div>
    <ul class="breadcrumb">
      <li>
        <a href="admin">首页</a>
        <span class="divider">/</span>
      </li>
      <li class="active">比赛管理</li>
    </ul>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="well">
          <div id="container">
            <table id="contest-list" class="table table-hover table-striped cf basetable dataTable">
              <thead>
                <tr>
                  <th width="5%">ID</th>
                  <th width="40%">Title</th>
                  <th width="14%">Start Time</th>
                  <th width="14%">End Time</th>
                  <th width="5%">Type</th>
                  <th width="5%">Status</th>
                  <th width="17%">Action</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="modal hide fade contestModal" id="editModal">
      <form class="" action="contest/update" id="editContestForm" method="post">
        <div class="modal-header">
          <button class="close" aria-hidden="true" data-dismiss="modal" type="button">x</button>
          <h3 id="editModalLabel">
            Edit contest <span id="cid"></span>:
            <span id="contest"></span>
          </h3>
        </div>
        <div class="modal-body">
          <div id="content">
            <img src="assets/images/ajax-loader.gif" /> Loading...
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Save</button>
          <button class="btn" data-dismiss="modal">Cancel</button>
        </div>
      </form>
    </div>
   </@override>
    
    <@override name="scripts">
      <script type="text/javascript" src="assets/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
      <script type="text/javascript" src="assets/js/dataTables.bootstrap.js"></script>
      <script type="text/javascript">
          var oTable = $('#contest-list').jfinalDataTable({
              "sAjaxSource": "${baseUrl!}/api/admin/contestList",
              "aaSorting": [
                [ 0, "desc" ]
              ],
              "aoColumns": [
                  { "mData": "cid",
                    "mRender": function (data, type, full) {
                      return '<a href="contest/show/' + full.cid + '" target="_blank">' + data + '</a>';
                    }
                  },
                  { "mData": "title",
                    "mRender": function (data, type, full) {
                      return '<a href="contest/admin/' + full.cid + '" target="_blank">' + data + '</a>';
                    }
                  },
                  { "mData": "startTime",
                    "mRender": function (data, type, full) {
                      return parseTimestamp(data);
                    }
                  },
                  { "mData": "endTime",
                    "mRender": function (data, type, full) {
                      return parseTimestamp(data);
                    }
                  },
                  { "mData": "ctype", "bSortable": false },
                  { "mData": "cstatus", "bSortable": false },
                  { "mData": null,
                    "bSortable": false,
                    "mRender": function (data, type, full) {
                      var action = '<button cid="' + full.cid 
                          + '" class="btn btn-success contest-edit">Edit</button> '
                          + '<button cid="' + full.cid 
                          + '" class="btn btn-warning contest-toggle">' 
                          + (full.status ? 'Delete' : 'Resume')
                          + '</button> ';
                      return action;
                    }
                  }
              ]
          });

        $('table').on('click', '.contest-edit', function() {
          var cid = $(this).attr('cid');
          $('span#cid').html(cid);
          //$('span#contest').html('<a href="contest/edit/' + cid + '">' + title + '</a>');
          $('#editModal').modal("show");
          $.get("contest/edit/" + cid + "?ajax=1", {},
            function(data) {
              $('#editModal #content').html(data);
          });
        });
      </script>
   </@override>
<@extends name="../_layout.html"></@extends>
